<template>
  <div class="bucket-container">
    <div class="bucket-navbar-container">
      <el-menu class="bucket-menu" :router="true" :default-active="index">
        <el-menu-item-group v-if="flowMenus1">
          <template slot="title">发起流程</template>
          <el-menu-item
            v-for="(item, i) in flowMenus1"
            :key="i"
            :index="item.path"
          >
            <i :class="item.icon" />
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template slot="title">流程管理</template>
          <el-menu-item index="/flow/flow_list_start">
            <i class="el-icon-top-right" />
            <span slot="title">我发起的</span>
          </el-menu-item>
          <el-menu-item index="/flow/flow_list_participant">
            <i class="el-icon-refresh-left" />
            <span slot="title">我参与的</span>
          </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group>
          <template slot="title">发行管理</template>
          <el-menu-item index="/flow/document_release_check">
            <i class="el-icon-finished" />
            <span slot="title">签收处理</span>
          </el-menu-item>
          <!-- <el-menu-item v-if="sign === 1" index="/flow/document_state">
            <i class="el-icon-turn-off" />
            <span slot="title">生效处理</span>
          </el-menu-item>
          <el-menu-item v-if="sign === 1" index="/flow/flow_standing_book">
            <i class="el-icon-document-copy" />
            <span slot="title">台账处理</span>
          </el-menu-item> -->
          <el-menu-item
            v-for="(item, i) in flowMenus2"
            :key="i"
            :index="item.path"
          >
            <i :class="item.icon" />
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-menu>
    </div>
    <div class="bucket-main-container">
      <router-view />
    </div>
  </div>
</template>

<script>
import { pageTodoCount } from '@/api/xd/documentFlow'
import { mapGetters } from 'vuex'
import { isInRole } from '@/utils/common.js'
import { FLOW_QA_PERMISSION } from '@/utils/global.js'
import UglyMap from '@/utils/uglyMap.js'

export default {
  data() {
    return {
      flowMenus1: null,
      flowMenus2: null,
      index: '/flow/flow_new',
      sign: isInRole(FLOW_QA_PERMISSION)
    }
  },
  computed: {
    ...mapGetters(['menusMap'])
  },
  mounted() {
    const map = this.listMenus()
    this.flowMenus1 = map.get('发起流程')
    this.flowMenus2 = map.get('发行管理')
    this.index = this.defaultActive()
    this.getList()
  },
  methods: {
    isInRole,
    defaultActive() {
      const pathName = this.$route.meta.defaultActive
      return pathName
    },
    listMenus() {
      const map = new UglyMap()
      if (this.menusMap) {
        const flowMenus = this.menusMap.flow || []
        flowMenus.forEach((e) => {
          const array = map.computeIfAbsent(e.groups, (k) => [])
          array.push(e)
        })
      }
      return map
    },
    async getList() {
      await pageTodoCount()
        .then((res) => {
          this.$store.commit('message/FLOW_COUNT', res.data)
        })
        .finally(() => {
          this.listLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.bucket-menu {
  .el-menu-item {
    .el-badge {
      height: 24px;
      line-height: 24px;
    }
  }
}
</style>
